<template>
  <div class="data-card-wrapper">
    <div class="data-card-icon" :class="colorClass">
      <component :is="iconComponent" />
    </div>
    <div class="data-card-info">
      <div class="data-card-title">{{ title }}</div>
      <div class="data-card-value">
        {{ value }} <span class="data-card-unit">{{ unit }}</span>
        <icon-arrow-up v-if="showTrend" class="trend-icon" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { 
  IconUser, 
  IconImage, 
  IconStorage, 
  IconMessage,
  IconArrowUp
} from '@arco-design/web-vue/es/icon';

// 定义组件属性
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  value: {
    type: [String, Number],
    required: true
  },
  unit: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'user',
    validator: (value: string) => ['user', 'image', 'storage', 'comment'].includes(value)
  },
  showTrend: {
    type: Boolean,
    default: false
  }
});

// 根据类型计算图标和颜色
const iconComponent = computed(() => {
  switch (props.type) {
    case 'user':
      return IconUser;
    case 'image':
      return IconImage;
    case 'storage':
      return IconStorage;
    case 'comment':
      return IconMessage;
    default:
      return IconUser;
  }
});

// 根据类型计算颜色类
const colorClass = computed(() => {
  switch (props.type) {
    case 'user':
      return 'blue';
    case 'image':
      return 'purple';
    case 'storage':
      return 'orange';
    case 'comment':
      return 'cyan';
    default:
      return 'blue';
  }
});
</script>

<style scoped>
.data-card-wrapper {
  display: flex;
  align-items: center;
  padding: 16px 0;
}

.data-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 22px;
  color: white;
}

.data-card-info {
  flex: 1;
}

.data-card-title {
  font-size: 14px;
  color: #86909c;
  margin-bottom: 4px;
}

.data-card-value {
  font-size: 24px;
  font-weight: 600;
  color: #1d2129;
  display: flex;
  align-items: center;
}

.data-card-unit {
  font-size: 14px;
  margin-left: 2px;
  color: #86909c;
}

.blue {
  background-color: #4080ff;
}

.purple {
  background-color: #a855f7;
}

.orange {
  background-color: #ff7d00;
}

.cyan {
  background-color: #14c9c9;
}

.trend-icon {
  margin-left: 8px;
  font-size: 14px;
  color: #f53f3f;
}
</style> 